<template>
  <div id="contentBox">
    <div style="text-align:center">
      <h3>{{ questionInfo.questionnaireName }}</h3>
    </div>
    <div
      v-for="(item,index) in questionList"
      :key="index"
      class="quslist"
      style="border-bottom:1px solid #666666;padding-bottom:15px;width"
    >
      <div class="everyQus">
        <h3>{{ item.topicName }}</h3>
      </div>
      <div
        style="width: 60%;margin: 0px auto;display: flex;flex-direction: column;justify-content: space-between;"
      >
        <el-radio
          v-for="item1 in item.answers"
          :key="item1.id"
          :label="item1.answerName"
        >{{ item1.answerName }}</el-radio>
      </div>
    </div>
  </div>
</template>

<script>
import * as Question from '@/api/questions'
export default {
  name: 'QuestionsAdd',
  data() {
    return {
      questionList: [],
      questionInfo: {}
    }
  },
  mounted() {
    this.getList()
  },
  methods: {
    getList() {
      Question.questionsDetail({ id: this.$route.query.id }).then(res => {
        console.log(res)
        this.questionInfo = res.data
        this.questionList = res.data.topics
      })
    }
  }
}
</script>

<style lang='scss' scoped>
#contentBox {
  padding: 10px 20px;
}
.quslist {
  width: 100%;
  .everyQus {
    margin: 0 auto;
    width: 60%;
    display: flex;
    align-items: center;
    justify-content: space-between;
  }
}
.el-radio{
  margin-bottom: 10px;
}
</style>
